<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            width="100%"
            :inline="true"
            label-width="100px"
        >

                    <el-form-item label="开始日期" prop="startTime">
                        <el-date-picker
                            v-model="queryParams.startTime"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择开始日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="EndTime">
                        <el-date-picker
                            v-model="queryParams.endTime"
                            type="date"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
                            placeholder="选择开始日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="接收手机号" prop="parentId">
                        <el-input v-model="queryParams.phone" placeholder="请输入接收手机号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="cyan"
                            icon="el-icon-search"
                            size="mini"
                            @click="handleQuery"
                            >搜索</el-button
                        >
                        <el-button
                            icon="el-icon-refresh"
                            size="mini"
                            @click="resetQuery"
                            >重置</el-button
                        >
                    </el-form-item>
        </el-form>
        <el-table v-loading="loading"
            :data="datalist"
            ref="refTable"
            style="width: 100%;"
        >
            <el-table-column
                label="所属业务"
                prop="businessModule"
            />
            <el-table-column
                label="短信id"
                prop="msgId"
                width="250"
            />
            <el-table-column
                label="接收手机号"
                prop="phone"
            />
            <el-table-column
                label="接收人账号"
                prop="toUser"
            />
            <el-table-column
                label="发送时间"
                prop="createTime"
            />
            <el-table-column
                label="是否成功"
            >
                <template slot-scope="scope">
                    <div :style="scope.row.isSuccess? 'color : #67C23A' : 'color:#DC143C'">
                        {{scope.row.isSuccess? '成功' : '失败'}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="200"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-view"
                        @click="OclickDetails(scope.row.id)"
                        >详情
                        </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="GetDataList"
        />

        <!-- 弹窗 -->
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="60%"
            >
            <el-form :model="detailsData" label-width="100px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="发送时间" prop="createTime">
                            <el-input readonly v-model="detailsData.createTime" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="接收人" prop="toUser">
                            <el-input readonly v-model="detailsData.toUser" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="接收人手机号" prop="phone">
                            <el-input readonly v-model="detailsData.phone" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="短信id" prop="msgId">
                            <el-input readonly v-model="detailsData.msgId" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属业务" prop="businessModule">
                            <el-input readonly v-model="detailsData.businessModule" placeholder="" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="短信类型" prop="msgType">
                            <el-input readonly v-model="detailsData.msgType" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="发送内容" prop="msgContent">
                            <el-input readonly type="textarea" v-model="detailsData.msgContent" placeholder="" :autosize="{ minRows: 5, maxRows: 10}"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="短信接口回执" prop="smsResponse">
                            <el-input type="textarea" readonly v-model="detailsData.smsResponse" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="发送结果" prop="isSuccess">
                            <div :style="detailsData.isSuccess? 'color : #67C23A' : 'color:#DC143C'">
                                {{detailsData.isSuccess? '成功' : '失败'}}
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="!detailsData.isSuccess">
                    <el-col>
                        <el-form-item label="失败原因" prop="errorReason">
                            <el-input readonly type="textarea" v-model="detailsData.errorReason" placeholder="" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button readonly type="primary" @click="dialogVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { SmsList , SmsId } from "@/api/monitor/SMSSendingRecord";
export default {
    data(){
        return{
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                startTime : '',
                endTime : '',
                Business : '',
                phone : '',
            },
            total : 0,
            // 所有数据
            datalist:[],
            // 详情数据
            detailsData : {},
            dialogVisible :false,
            loading: false,
        }
    },
    created(){
        this.GetDataList()
    },
    methods:{
        // 查询
        handleQuery() {
          this.GetDataList();
        },
        // 重置
        resetQuery() {
            // 查询字段
            this.queryParams =  {
                pageNum: 1,
                pageSize: 10,
                startTime : '',
                endTime : '',
                Business : '',
                phone:''
            }
        },
        GetDataList(){
          this.loading = true;
            SmsList(this.queryParams).then(res=>{
                this.datalist = res.rows
                this.total = res.total
              this.loading = false;
            })
        },
        OclickDetails(id){
            SmsId(id).then(res=>{
                this.detailsData = res.data
                this.dialogVisible = true
            })
        }
    }
}
</script>
<style lang="scss" scoped>
  .el-table{
    color: #000;
  }
</style>l
